<template>
  <div class="">
    <el-row>
      <el-col>
        <el-table
          ref="gameTable"
          :data="tableData"
          highlight-current-row
          height="300"
          style="width: 100%"
        >
          <el-table-column
            prop="sort"
            label="日期"
            width="50"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="project"
            label="项目"
          ></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="team"
            label="队伍"
          ></el-table-column>
          <el-table-column prop="status" label="状态" width="70">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.status === '已打分' ? 'success' : 'primary'"
                disable-transitions
                >{{ scope.row.status }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="handleStart(scope.$index, scope.row)"
                >开始</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleStop(scope.$index, scope.row)"
                >结束</el-button
              >
              <el-button
                size="mini"
                type="warning"
                @click="handleStop(scope.$index, scope.row)"
                >弃权</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-card shadow="never" style="margin: 20px 0">
      <el-row :gutter="10" class="panel-group">
        <el-col
          :xs="12"
          :sm="8"
          :md="4"
          :lg="{ span: '24-5' }"
          class="card-panel-col"
          v-for="(item, index) in 10"
          :key="index"
          style="margin-bottom: 20px"
        >
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px">
              <div class="" style="text-align: center">
                <div class="">裁判角色(真实姓名)</div>
                <div class="" style="font-size: 30px; padding-top: 10px">
                  8.8
                </div>
              </div>
              <div
                class="bottom clearfix"
                :class="[index % 2 == 0 ? 'already' : 'noready']"
              >
                <el-row type="flex" justify="space-around">
                  <el-col v-if="index % 2 == 0">
                    <i class="el-icon-refresh">重打</i>
                  </el-col>
                  <el-col v-if="index % 2 == 0">
                    <i class="el-icon-bottom">下线</i>
                  </el-col>
                  <el-col>
                    <i class="el-icon-edit">编辑</i>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="panel-group" type="flex">
        <el-col :xs="12" :sm="8" :lg="{ span: '24-5' }" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px">
              <div class="" style="text-align: center">
                <div class="">加分</div>
                <div class="" style="font-size: 30px; padding-top: 10px">
                  8.8
                </div>
              </div>
              <div class="bottom clearfix headreferee">
                <i class="el-icon-edit">编辑</i>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="{ span: '24-5' }" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <div style="padding-top: 14px">
              <div class="" style="text-align: center">
                <div class="">减分</div>
                <div class="" style="font-size: 30px; padding-top: 10px">
                  8.8
                </div>
              </div>
              <div class="bottom clearfix headreferee">
                <i class="el-icon-edit">编辑</i>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :xs="12" :sm="8" :lg="{ span: '24-15' }" class="card-panel-col">
          <el-card shadow="never" :body-style="{ padding: '0px' }">
            <!-- <el-button @click="positionIndex('3')">定位</el-button> -->
            <el-row type="flex">
              <el-col>
                <div style="padding-top: 14px">
                  <div class="" style="text-align: center">
                    <div class="">总得分</div>
                    <div class="" style="font-size: 80px; padding-top: 10px">
                      8.8
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col>
                <div style="padding-top: 14px">
                  <div class="" style="text-align: center">
                    <div class="">排名</div>
                    <div class="" style="font-size: 80px; padding-top: 10px">
                      1
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col>
                <div class="submit-score">
                  <el-button
                    icon="el-icon-upload2"
                    type="success"
                    @click="positionIndex('3')"
                    >提交打分</el-button
                  >
                </div>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        value: null,
      },
      tableData: [
        {
          sort: "1",
          project: "学校俱乐部U9（9岁及以下）-集体花球自选动作",
          team: "青岛理工大学QUT stars啦啦队",
          status: "已打分",
        },
        {
          sort: "2",
          project: "学校俱乐部U28（28岁及以下）-集体自由舞蹈自选动作-徒手组",
          team: "ETL啦啦操俱乐部青岛恒星科技学院啦啦队",
          status: "未打分",
        },
        {
          sort: "3",
          project: "学校俱乐部U28（28岁及以下）-双人花球自选动作",
          team: "QCU健身俱乐部Hot Chili啦啦队",
          status: "未打分",
        },
        {
          sort: "4",
          project: "学校俱乐部U28（28岁及以下）-双人花球自选动作",
          team: "QCU健身俱乐部Hot Chili啦啦队",
          status: "未打分",
        },
        {
          sort: "5",
          project: "学校俱乐部U28（28岁及以下）-双人街舞自选动作",
          team: "锦州市第二高级中学启航啦啦队",
          status: "未打分",
        },
        {
          sort: "6",
          project: "学校俱乐部U28（28岁及以下）-双人街舞自选动作",
          team: "锦州市第二高级中学启航啦啦队",
          status: "未打分",
        },
        {
          sort: "7",
          project: "学校俱乐部U28（28岁及以下）-双人街舞自选动作",
          team: "青岛理工大学QUT stars啦啦队	",
          status: "未打分",
        },
        {
          sort: "8",
          project: "学校俱乐部U28（28岁及以下）-双人街舞自选动作",
          team: "ETL啦啦操俱乐部青岛恒星科技学院啦啦队",
          status: "未打分",
        },
        {
          sort: "9",
          project: "社会俱乐部U18（18岁及以下）-双人街舞自选动作",
          team: "青岛市崂山区第二实验小学Shining啦啦队",
          status: "未打分",
        },
        {
          sort: "10",
          project: "社会俱乐部U18（18岁及以下）-双人街舞自选动作",
          team: "黄海职校海之魂啦啦操俱乐部海之魂啦啦队",
          status: "未打分",
        },
        {
          sort: "11",
          project: "学校俱乐部U28（28岁及以下）-集体爵士自选动作",
          team: "中国海洋大学Dmore啦啦队",
          status: "未打分",
        },
        {
          sort: "12",
          project: "学校俱乐部U28（28岁及以下）-花球校园啦啦操示范套路(第三套)",
          team: "中国海洋大学Dmore啦啦队",
          status: "未打分",
        },
        {
          sort: "13",
          project: "社会俱乐部U12（12岁及以下）-集体花球自选动作",
          team: "中国海洋大学Dmore啦啦队",
          status: "未打分",
        },
      ],
    };
  },
  methods: {
    handleStart() {},
    handleStop() {},
    positionIndex(e) {
      if (this.tableData && this.tableData.length) {
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].sort == e) {
            this.$refs["gameTable"].setCurrentRow(this.tableData[i]);
            var dom = this.$refs.gameTable.bodyWrapper;
            this.$nextTick(() => {
              console.log(e);
              if (e > 2) {
                dom.scrollTo(0, 57 * (e - 2));
              } else {
                return;
              }
            });
            return;
          }
        }
        this.$message.error("未找到相关数据");
        // this.scanData = null;
        // this.$refs.scanDataRef.focus();
        return;
      }
    },
    getElementTop(element) {
      console.log("element", element);
      var actualTop = element.offsetTop;
      var current = element.offsetParent;
      while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
      }
      return actualTop;
    },
    open() {
      this.$confirm("此操作将提交打分, 是否继续?", "提示", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "打分成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消打分",
          });
        });
    },
  },
};
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.el-rate {
  height: 50px;
}
.el-rate__icon {
  font-size: 50px;
  margin-right: 6px;
  color: #c0c4cc;
  transition: 0.3s;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
  text-align: center;
  padding: 14px 0;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}
.el-col-lg-24-5 {
  width: 20%;
}
.el-col-lg-24-15 {
  width: 60%;
}
.already {
  background-color: #409eff;
}
.noready {
  background-color: #909399;
}
.headreferee {
  background-color: #67c23a;
}
.el-table--striped .el-table__body tr.el-table__row--striped.current-row td,
.el-table__body tr.current-row > td {
  color: #fff;
  background-color: #409eff !important;
}
.submit-score {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>